<template>
  <div class="page">
    <van-nav-bar title="影院">
      <template #left>
        <CurCity />
      </template>

      <template #right>
        <van-icon name="search" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu>
      <van-dropdown-item ref="itemRef" :title="cinema.curDis?.districtName">
        <van-grid>
          <van-grid-item
            v-for="item in cinema.districtList"
            :key="item.districtId"
            :text="item.districtName"
            :class="{ active: item.districtId === cinema.curDisId }"
            @click="onDisClick(item.districtId)"
          />
        </van-grid>
      </van-dropdown-item>

      <van-dropdown-item
        v-model="ticketFlag"
        :options="ticketFlagOptions"
      ></van-dropdown-item>
    </van-dropdown-menu>

    <van-list v-if="cinema.displayList.length">
      <van-cell
        v-for="item in cinema.displayList"
        :key="item.cinemaId"
        :title="item.districtName"
        :value="item.name"
      />
    </van-list>

    <van-empty v-else description="描述文字" />
  </div>
</template>

<script lang="ts" setup>
import CurCity from "@/components/cur-city.vue";
import { onMounted, ref } from "vue";
import useStore from "@/hooks/useStore";
import type { DropdownItemInstance } from "vant";
import { watch } from "vue";
const { cinema } = useStore();

const itemRef = ref<DropdownItemInstance | null>(null);
const onDisClick = (id: number) => {
  // 修改仓库数据
  cinema.setCurDisId(id);
  // 关闭 downdrop
  itemRef.value?.toggle();
};

const ticketFlag = ref(1);
const ticketFlagOptions = [
  { text: "App订票", value: 1 },
  { text: "前台兑换", value: 2 },
];

watch(ticketFlag, (newVal) => {
  cinema.getCinemaList(newVal);
});
onMounted(() => {
  cinema.setCurDisId(-1);
  cinema.getCinemaList();
});
</script>

<style lang="scss" scoped>
.active {
  :deep(.van-grid-item__text) {
    color: var(--primary-color);
  }
}
</style>
